<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="weex-viewport" content="750">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no, email=no">
  <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</head>
<style>
body{
    width: 100%;
    height:300px;
    padding: 0;
    margin: 0;
    background-color: #f5f5f5;
    overflow: hidden;
}
.main{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
<body>
    <div class="main">
        <div id="chart" style="width: 100%;height:100%;"></div>
    </div>
</body>

<script>
    window.onload = function(){
        var myChart = echarts.init(document.getElementById('chart')); 
        
        var option = {
            graphic: [{
                type: 'text',
                left: 'center',
                top: '44%',
                style: {
                    text: '本年累计',
                    textAlign: 'center',
                    fill: '#8a8a8a',
                    fontSize: 12
                },
            },{
                type: 'text',
                left: 'center',
                top: '52%',
                style: {
                    text: '330,000.00',
                    textAlign: 'center',
                    fontSize: 16
                }
            }],
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['45%', '70%'],
                data: [
                    { value: 33, name: '净利润：1.32%' },
                    { value: 234, name: '收入：32.26%' },
                    { value: 234, name: '成本：32.26%' },
                    { value: 135, name: '费用：15.48%' },
                    { value: 31, name: '税金及附加：10.2%' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                labelLine: {
                    length: 10,
                    length2: 10
                },
                color: ['#3d731b', '#3283bb', '#529fd3', '#7addfa', '#89ce33']
            }]
        };
        // 为echarts对象加载数据 
        myChart.setOption(option);
    }
</script>
</html>